<template>
  <div
    class="card my-transition px-4 py-4 d-flex rounded-3  jusitfy-conten-center align-items-center "
  >
    <div class="log my-transition">
      <slot name="img"></slot>
    </div>
    <div class="card-body">
      <slot name="card-title"> </slot>
      <slot name="card-text"> </slot>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.card {
  overflow: hidden;
  height: 25rem;

  cursor: pointer;
  transition: all 0.5s;
  transform: translateY(0);
}

.card:hover {
  background-color: var(--active-color);
  transform: translateY(-0.625rem);
}

.card:hover h5,
.card:hover p {
  color: #fff;
}

.card:hover .tips {
  background: #fff;
}

.card:hover .tips span {
  color: blueviolet;
}
.card .log {
  width: 6.25rem;
  height: 6.25rem;
  margin: 1.875rem;
  background-color: #ebf6ff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card .tips {
  width: 7.5rem;
  height: 7.5rem;
  right: -3.75rem;
  top: -3.75rem;
  border-radius: 50%;
  transition: all 0.5s;
  background: var(--active-color);
}

.card:hover i {
  color: #fff;
}

.tips span {
  position: absolute;
  bottom: 1.125rem;
  left: 1.5rem;
  font-weight: 900;
  font-size: 1.5em;
  color: #fff;
  transition: all 0.5s;
}

.card .log {
  width: 6.25rem;
  height: 6.25rem;
}
.card .log img {
  display: inline-block;
  width: 5rem !important;
  height: 5rem !important;
  border-radius: 50%;
  transition: all 0.5s ease;
}
// .circle-icon:hover svg {
//   fill: #fff;
// }
// .circle-icon svg {
//   display: inline-block;
//   width: 60%;
//   height: 60%;
//   fill: #3caaf7;
// }
.card-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  padding: 0px !important;
}
.card-body p {
  line-height: 1.7;
}
</style>
